<template>
  <div>
    <logo :collapse="isOpen" />
    <n-menu
      :options="menuOptions"
      :collapsed="isOpen"
      :default-expanded-keys="defaultExpandedKeys"
      @update:expanded-keys="handleUpdateExpandedKeys"
      wrap-class="scrollbar-wrapper"
    >
    </n-menu>
  </div>
</template>
<script>
import logo from "./Logo.vue";
import { onMounted, h, reactive, toRefs, computed } from "vue";
import { NIcon } from "naive-ui";
import { Newspaper, PersonSharp, AppsSharp, Home } from "@vicons/ionicons5";
import { useStore } from "vuex";
import { key } from "store";

export default {
  name: "Sidebar",
  components: {
    logo,
  },
  setup() {
    const store = useStore(key);
    onMounted(() => {
    })
    const renderIcon = (icon) => {
      return () => h(NIcon, null, { default: () => h(icon) });
    };
    // const isOpen = computed({
    //   get(){
    //     return store.getters.getSidebar;
    //   }
    // })
    const isOpen = computed(() => {
      return store.state.sidebar
    })
    const state = reactive({
      menuOptions: [
        {
          label: "权限管理",
          key: "hear-the-wind-sing",
          icon: renderIcon(PersonSharp),
        },
        {
          label: "菜单管理",
          key: "pinball-1973",
          icon: renderIcon(AppsSharp),
        },
        {
          label: "博客管理",
          key: "a-wild-sheep-chase",
          icon: renderIcon(Newspaper),
        },
        {
          label: "首页管理",
          key: "dance-dance-dance",
          icon: renderIcon(Home),
        },
      ],
      collapse: store.getters.getSidebar,
      defaultExpandedKeys: ["dance-dance-dance", "food"],
    });
    const handleUpdateExpandedKeys = (keys) => {
      console.log("[onUpdate:expandedKeys]: " + JSON.stringify(keys));
    };
    return {
      ...toRefs(state),
      renderIcon,
      handleUpdateExpandedKeys,
      isOpen,
    };
  },
};
</script>
